<!-- assuming we're already inside a <div class="span5"> -->
<div class="dw-create-publish">
    <div class="publish-step is-published">
        <svelte:component ref:publish this="{PublishLogic}" />
    </div>
</div>
<script>
    import PublishLogic from './PublishLogic.html';
    import { loadScript, loadStylesheet } from '@datawrapper/shared/fetch';
    import { observe } from 'svelte-extras';

    export default {
        data() {
            return {
                PublishLogic
            };
        },
        oncreate() {
            this.store.observe = observe;
            this.store.observe('publishLogic', cfg => {
                if (cfg && cfg.mod) {
                    loadStylesheet(cfg.css);
                    loadScript(cfg.src, () => {
                        require([cfg.mod], mod => {
                            this.set({ PublishLogic: mod.App });
                            this.refs.publish.set(cfg.data);
                        });
                    });
                } else {
                    this.set({ PublishLogic });
                    this.refs.publish.set(cfg.data);
                }
            });
        }
    };
</script>
